<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useLocalStorageTodos } from '@/composables/useLocalStorageTodos'
import type { Todo } from '@/types'
import TodoInput from '@/components/TodoInput.vue'
import TodoColumn from '@/components/TodoColumn.vue'

// 获取路由实例
const router = useRouter()

// 本地存储
const { todoList, saveToLocalStorage, loadFromLocalStorage } = useLocalStorageTodos()

// 编辑状态管理
const editingId = ref<number | null>(null)
const editText = ref('')

onMounted(() => {
  const currentUser = localStorage.getItem('currentUser')
  if (!currentUser) {
    router.push('/login')
  } else {
    // 加载当前用户的数据
    loadFromLocalStorage()
  }
})

// 计算属性：未完成待办
const pendingTodos = computed(() =>
  todoList.value.filter(todo => !todo.isDone)
)

// 计算属性：已完成待办
const completedTodos = computed(() =>
  todoList.value.filter(todo => todo.isDone)
)

// 添加待办
const handleAddTodo = (content: string) => {
  const newTodo: Todo = {
    id: Date.now(), 
    content,
    isDone: false,
    createdAt: new Date().toISOString()
  }
  todoList.value.push(newTodo)
  saveToLocalStorage(todoList.value)
}

// 切换待办状态
const handleToggleStatus = (id: number) => {
  const todo = todoList.value.find(t => t.id === id)
  if (todo) {
    todo.isDone = !todo.isDone
    saveToLocalStorage(todoList.value)
  }
}

// 删除待办
const handleDelete = (id: number) => {
  todoList.value = todoList.value.filter(todo => todo.id !== id)
  saveToLocalStorage(todoList.value)
}

// 开始编辑
const handleStartEdit = (todo: Todo) => {
  editingId.value = todo.id
  editText.value = todo.content
}

// 完成编辑
const handleFinishEdit = (id: number, content: string) => {
  const todo = todoList.value.find(t => t.id === id)
  if (todo && content.trim()) {
    todo.content = content.trim()
    saveToLocalStorage(todoList.value)
  }
  handleCancelEdit()
}

// 取消编辑
const handleCancelEdit = () => {
  editingId.value = null
  editText.value = ''
}

// 更新编辑文本
const handleUpdateEditText = (value: string) => {
  editText.value = value
}

// 拖拽结束处理
const handleDragEnd = () => {
  saveToLocalStorage(todoList.value)
}

// 退出登录
const handleLogout = () => {
  localStorage.removeItem('currentUser')
  router.push('/login')
}
</script>

<template>
  <div class="todo-app">
    <header class="app-header">
      <h1>我的待办清单</h1>
      <button class="logout-btn" @click="handleLogout">退出登录</button>
    </header>
    
    <main>
      <TodoInput @add="handleAddTodo" />
      
      <div class="todo-columns">
        <TodoColumn
          title="未完成"
          :todos="pendingTodos"
          :editing-id="editingId"
          :edit-text="editText"
          @toggle-status="handleToggleStatus"
          @delete="handleDelete"
          @start-edit="handleStartEdit"
          @finish-edit="handleFinishEdit"
          @cancel-edit="handleCancelEdit"
          @update-edit-text="handleUpdateEditText"
          @drag-end="handleDragEnd"
        />
        
        <TodoColumn
          title="已完成"
          :todos="completedTodos"
          :editing-id="editingId"
          :edit-text="editText"
          @toggle-status="handleToggleStatus"
          @delete="handleDelete"
          @start-edit="handleStartEdit"
          @finish-edit="handleFinishEdit"
          @cancel-edit="handleCancelEdit"
          @update-edit-text="handleUpdateEditText"
          @drag-end="handleDragEnd"
        />
      </div>
    </main>
    
    <!-- 添加 Gitee 仓库地址 -->
    <footer class="gitee-footer">
      <p>Gitee 仓库地址: 
        <a href="https://gitee.com/xdyui/todolist__project" target="_blank">
          仓库
        </a>
      </p>
    </footer>
  </div>
</template>

<style scoped>
.todo-app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.app-header {
  text-align: center;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-header h1 {
  color: #333;
  font-size: 28px;
  margin: 0;
}

.logout-btn {
  padding: 8px 16px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.logout-btn:hover {
  background-color: #d32f2f;
}

.todo-columns {
  display: flex;
  gap: 20px;
  margin: 0 15px;
}

/* 添加 Gitee 链接样式 */
.gitee-footer {
  margin-top: 30px;
  text-align: center;
  font-size: 14px;
  color: #666;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.gitee-footer a {
  color: #42b983;
  text-decoration: none;
}

.gitee-footer a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .todo-columns {
    flex-direction: column;
  }
  
  .app-header {
    flex-direction: column;
    gap: 15px;
  }
  
  .gitee-footer {
    margin: 30px 15px 0;
  }
}
</style>